<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
            <view class="header"></view>
            <view class="main">
                <qrcode 
					:size="size" 
					:value="value" 
					:logo="logo" 
					:bgColor="bgColor" 
					:fgColor="fgColor"
				></qrcode>
            </view>
            <view class="footer uni-center">
                <text class="title">{{ community }}</text>
            </view>
		</view>
	</view>
</template>

<script>
	import Qrcode from "qrcode-vue";
	import QrcodeLogo from "../../static/yunzhu2.jpg";
	export default {
		components: {
			Qrcode
		},
		data() {
			return {
                size: 100,
				bgColor: '#fff',
				fgColor: '#000',
				value: '',
				logo: QrcodeLogo,
				community: "测试小区测试小区"
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', event => {
				const { data } = event;
				if (data) {
					this.value = data.qrcode;
					this.community = data.community;
				}
			});
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

    .header {
		flex: 2;
	}

    .main {
		flex: 5;
	}

	.footer {
        width: 100%;
		flex: 4;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		font-weight: bold;
	}
</style>
